<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1, user-scalable=0">

  <!-- Always force latest IE rendering engine or request Chrome Frame -->
  <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">

  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,800">

  <!-- Use title if it's in the page YAML frontmatter -->
  <title>Core Admin Theme</title>

  <link href="../../stylesheets/application.css" media="screen" rel="stylesheet" type="text/css" />

  <script src="../../javascripts/application.js" type="text/javascript"></script>
</head>



<body>
<nav class="navbar navbar-default navbar-inverse navbar-static-top" role="navigation">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <a class="navbar-brand" href="#">Core Admin</a>

    
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-primary">
          <span class="sr-only">Toggle Side Navigation</span>
          <i class="icon-th-list"></i>
        </button>

        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-top">
          <span class="sr-only">Toggle Top Navigation</span>
          <i class="icon-align-justify"></i>
        </button>
    
  </div>

  
      

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse navbar-collapse-top">
        <div class="navbar-right">

          <ul class="nav navbar-nav navbar-left">
            <li class="cdrop active"><a href="#">Link</a></li>

            <li class="cdrop"><a href="#">Link</a></li>

            <li class="dropdown cdrop">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </li>
          </ul>

          <form class="navbar-form navbar-left" role="search">
            <div class="form-group">
              <input type="text" class="search-query animated" placeholder="Search">
              <i class="icon-search"></i>
            </div>
          </form>

          <ul class="nav navbar-nav navbar-left">
            <li class="dropdown">
              <a href="#" class="dropdown-toggle dropdown-avatar" data-toggle="dropdown">
              <span>
                <img class="menu-avatar" src="../../images/avatars/avatar1.jpg" /> <span>John Smith <i class="icon-caret-down"></i></span>
                <span class="badge badge-dark-red">5</span>
              </span>
              </a>
              <ul class="dropdown-menu">

                <!-- the first element is the one with the big avatar, add a with-image class to it -->

                <li class="with-image">
                  <div class="avatar">
                    <img src="../../images/avatars/avatar1.jpg" />
                  </div>
                  <span>John Smith</span>
                </li>

                <li class="divider"></li>

                <li><a href="#"><i class="icon-user"></i> <span>Profile</span></a></li>
                <li><a href="#"><i class="icon-cog"></i> <span>Settings</span></a></li>
                <li><a href="#"><i class="icon-envelope"></i> <span>Messages</span> <span class="label label-dark-red pull-right">5</span></a></li>
                <li><a href="#"><i class="icon-off"></i> <span>Logout</span></a></li>
              </ul>
            </li>
          </ul>
        </div>




      </div><!-- /.navbar-collapse -->

  
</nav>
<div class="sidebar-background">
  <div class="primary-sidebar-background"></div>
</div>

<div class="primary-sidebar">

  <!-- Main nav -->
  <ul class="nav navbar-collapse collapse navbar-collapse-primary">
    
    

        <li class="">
          <span class="glow"></span>
          <a href="../dashboard/dashboard.html">
              <i class="icon-dashboard icon-2x"></i>
              <span>Dashboard</span>
          </a>
        </li>

    


    

        <li class="dark-nav active">

          <span class="glow"></span>

          

          <a class="accordion-toggle  " data-toggle="collapse" href="#6jgfKasS6P">
              <i class="icon-beaker icon-2x"></i>
                    <span>
                      UI Lab
                      <i class="icon-caret-down"></i>
                    </span>

          </a>

          <ul id="6jgfKasS6P" class="collapse in">
            
                <li class="">
                  <a href="buttons.html">
                      <i class="icon-hand-up"></i> Buttons
                  </a>
                </li>
            
                <li class="">
                  <a href="general.html">
                      <i class="icon-beaker"></i> General elements
                  </a>
                </li>
            
                <li class="active">
                  <a href="icons.html">
                      <i class="icon-info-sign"></i> Icons
                  </a>
                </li>
            
                <li class="">
                  <a href="grid.html">
                      <i class="icon-th-large"></i> Grid
                  </a>
                </li>
            
                <li class="">
                  <a href="tables.html">
                      <i class="icon-table"></i> Tables
                  </a>
                </li>
            
                <li class="">
                  <a href="widgets.html">
                      <i class="icon-plus-sign-alt"></i> Widgets
                  </a>
                </li>
            
          </ul>

        </li>

    


    

        <li class="">
          <span class="glow"></span>
          <a href="../forms/forms.html">
              <i class="icon-edit icon-2x"></i>
              <span>Forms</span>
          </a>
        </li>

    


    

        <li class="">
          <span class="glow"></span>
          <a href="../charts/charts.html">
              <i class="icon-bar-chart icon-2x"></i>
              <span>Charts</span>
          </a>
        </li>

    


    

        <li class="dark-nav ">

          <span class="glow"></span>

          

          <a class="accordion-toggle collapsed " data-toggle="collapse" href="#nYmK7sQfjZ">
              <i class="icon-link icon-2x"></i>
                    <span>
                      Others
                      <i class="icon-caret-down"></i>
                    </span>

          </a>

          <ul id="nYmK7sQfjZ" class="collapse ">
            
                <li class="">
                  <a href="../other/wizard.html">
                      <i class="icon-magic"></i> Wizard
                  </a>
                </li>
            
                <li class="">
                  <a href="../other/login.html">
                      <i class="icon-user"></i> Login Page
                  </a>
                </li>
            
                <li class="">
                  <a href="../other/sign_up.html">
                      <i class="icon-user"></i> Sign Up Page
                  </a>
                </li>
            
                <li class="">
                  <a href="../other/full_calendar.html">
                      <i class="icon-calendar"></i> Full Calendar
                  </a>
                </li>
            
                <li class="">
                  <a href="../other/error404.html">
                      <i class="icon-ban-circle"></i> Error 404 page
                  </a>
                </li>
            
          </ul>

        </li>

    


  </ul>

  <div class="hidden-sm hidden-xs">
    <div class="text-center" style="margin-top: 60px">
      <div class="easy-pie-chart-percent" style="display: inline-block" data-percent="89"><span>89%</span></div>
      <div style="padding-top: 20px"><b>CPU Usage</b></div>
    </div>

    <hr class="divider" style="margin-top: 60px">

    <div class="sparkline-box side">

      <div class="sparkline-row">
        <h4 class="gray"><span>Orders</span> 847</h4>
        <div class="sparkline big" data-color="gray"><!--29,11,19,12,27,11,14,12,27,27,8,18--></div>
      </div>

      <hr class="divider">
      <div class="sparkline-row">
        <h4 class="dark-green"><span>Income</span> $43.330</h4>
        <div class="sparkline big" data-color="darkGreen"><!--10,24,11,14,17,9,27,10,13,15,26,24--></div>
      </div>

      <hr class="divider">
      <div class="sparkline-row">
        <h4 class="blue"><span>Reviews</span> 223</h4>
        <div class="sparkline big" data-color="blue"><!--26,3,24,26,7,27,4,25,29,23,5,26--></div>
      </div>

      <hr class="divider">
    </div>
  </div>


</div>
<div class="main-content">
  <div class="container">
    <div class="row">

      <div class="area-top clearfix">
        <div class="pull-left header">
          <h3 class="title">
            <i class="icon-info-sign"></i>
            Icons
          </h3>
          <h5>
            <span>
              A subtitle can go here
            </span>
          </h5>
        </div>

        <ul class="list-inline pull-right sparkline-box">

          <li class="sparkline-row">
            <h4 class="blue"><span>Orders</span> 847</h4>
            <div class="sparkline big" data-color="blue"><!--23,7,27,22,11,27,29,25,22,23,27,11--></div>
          </li>

          <li class="sparkline-row">
            <h4 class="green"><span>Reviews</span> 223</h4>
            <div class="sparkline big" data-color="green"><!--19,26,12,28,14,9,5,7,24,10,3,14--></div>
          </li>

          <li class="sparkline-row">
            <h4 class="red"><span>New visits</span> 7930</h4>
            <div class="sparkline big"><!--14,5,20,12,3,8,22,18,8,17,17,13--></div>
          </li>

        </ul>
      </div>
    </div>
  </div>

  <div class="container padded">
    <div class="row">

      <!-- Breadcrumb line -->

      <div id="breadcrumbs">
        <div class="breadcrumb-button blue">
          <span class="breadcrumb-label"><i class="icon-home"></i> Home</span>
          <span class="breadcrumb-arrow"><span></span></span>
        </div>

        
            <div class="breadcrumb-button">
              <span class="breadcrumb-label">
                <i class="icon-beaker"></i> UI Lab
              </span>
              <span class="breadcrumb-arrow"><span></span></span>
            </div>
        

        <div class="breadcrumb-button">
          <span class="breadcrumb-label">
            <i class="icon-info-sign"></i> Icons
          </span>
          <span class="breadcrumb-arrow"><span></span></span>
        </div>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="box">
  <div class="box-header">
    <span class="title">FontAwesome</span>
  </div>
  <div class="box-content padded">
    <div class="row">
      <div class="col-md-4">
        <h4><i class="icon-flag"></i> One font, 249 icons</h4>
        In a single collection, Font Awesome is a pictographic language of web-related actions.
      </div>
      <div class="col-md-4">
        <h4><i class="icon-pencil"></i> CSS control</h4>
        Easily style icon color, size, shadow, and anything that's possible with CSS.
      </div>
      <div class="col-md-4">
        <h4><i class="icon-fullscreen"></i> Infinite scalability</h4>
        Scalable vector graphics means every icon looks awesome at any size.
      </div>
    </div>
    <div class="row">
      <div class="col-md-4">
        <h4><i class="icon-beer"></i> Free, as in Beer</h4>
        Font Awesome is completely free for commercial use.
      </div>
      <div class="col-md-4">
        <h4><i class="icon-ok"></i> IE7 Support</h4>
        Font Awesome supports IE7. If you need it, you have my condolences.
      </div>
      <div class="col-md-4">
        <h4><i class="icon-eye-open"></i> Perfect on Retina Displays</h4>
        Font Awesome icons are vectors, which mean they're gorgeous on high-resolution displays.
      </div>
    </div>
    <div class="row">
      <div class="col-md-4">
        <h4><i class="icon-thumbs-up"></i> Made for Twitter Bootstrap</h4>
        Designed from scratch to be fully compatible with <a href="http://twitter.github.com/bootstrap/" target="_blank">Twitter Bootstrap 2.2.2</a>.
      </div>
      <div class="col-md-4 col-md-offset-4">
        <h4><i class="icon-search"></i> Screen reader compatible</h4>
        Font Awesome won't trip up screen readers, unlike other icon fonts.
      </div>
    </div>
  </div>
</div>

<div class="box">
  <div class="box-header">
    <span class="title">What's new in Font Awesome 3.0</span>
  </div>
  <div class="box-content padded">
    <div class="row">
      <div class="col-md-4">
        <h4><i class="icon-magic"></i> Pixel Perfection at 14px</h4>
        Every single icon re-created from the ground up to be optimized for Bootstrap's default 14px.
      </div>
      <div class="col-md-4">
        <h4><i class="icon-th-large"></i> <a target="_blank" href="http://icnfnt.com/">Font Sub-setting</a></h4>
        Thanks to <a target="_blank" href="https://twitter.com/grantgordon">@grantgordon</a> and <a target="_blank" href="https://twitter.com/johnsmclay">@johnsmclay</a>, you can <a target="_blank" href="http://icnfnt.com/">subset</a> to get just the icons you need.
      </div>
      <div class="col-md-4">
        <h4><i class="icon-legal"></i> <a href="#license">Better License</a></h4>
        SIL open font license, MIT license for code. No more attribution required, but much appreciated.
      </div>
    </div>
    <div class="row">
      <div class="col-md-4">
        <h4><i class="icon-lightbulb"></i> 40 New Icons in 3.0</h4>
        Requested by the active community on the <a href="https://github.com/FortAwesome/Font-Awesome" target="_blank">Font Awesome GitHub project</a>.
      </div>
      <div class="col-md-4">
        <h4><i class="icon-spinner icon-spin"></i> <a href="#examples">New Styles</a></h4>
        <a href="#examples">New styles</a> for animated spinning icons, icons with 2x-4x size multipliers, icon borders, &amp; more.
      </div>
      <div class="col-md-4">
        <h4><i class="icon-resize-small"></i> 28% Smaller Payload</h4>
        3.0 is smaller, even with 16% more icons. Crazy small if you <a target="_blank" href="http://icnfnt.com/">subset</a> just the icons you need.
      </div>
    </div>
  </div>
</div>

<div class="box">
  <div class="box-header">
    <span class="title">New Icons in 3.0</span>
  </div>
  <div class="box-content padded">
    <div class="row">
      <div class="col-md-3">
        <ul class="the-icons">
          <li><i class="icon-cloud-download"></i> icon-cloud-download</li>
          <li><i class="icon-cloud-upload"></i> icon-cloud-upload</li>
          <li><i class="icon-lightbulb"></i> icon-lightbulb</li>
          <li><i class="icon-exchange"></i> icon-exchange</li>
          <li><i class="icon-bell-alt"></i> icon-bell-alt</li>
          <li><i class="icon-file-alt"></i> icon-file-alt</li>
          <li><i class="icon-beer"></i> icon-beer</li>
          <li><i class="icon-coffee"></i> icon-coffee</li>
          <li><i class="icon-food"></i> icon-food</li>
          <li><i class="icon-fighter-jet"></i> icon-fighter-jet</li>
        </ul>
      </div>
      <div class="col-md-3">
        <ul class="the-icons">
          <li><i class="icon-user-md"></i> icon-user-md</li>
          <li><i class="icon-stethoscope"></i> icon-stethoscope</li>
          <li><i class="icon-suitcase"></i> icon-suitcase</li>
          <li><i class="icon-building"></i> icon-building</li>
          <li><i class="icon-hospital"></i> icon-hospital</li>
          <li><i class="icon-ambulance"></i> icon-ambulance</li>
          <li><i class="icon-medkit"></i> icon-medkit</li>
          <li><i class="icon-h-sign"></i> icon-h-sign</li>
          <li><i class="icon-plus-sign-alt"></i> icon-plus-sign-alt</li>
          <li><i class="icon-spinner"></i> icon-spinner</li>
        </ul>
      </div>
      <div class="col-md-3">
        <ul class="the-icons">
          <li><i class="icon-angle-left"></i> icon-angle-left</li>
          <li><i class="icon-angle-right"></i> icon-angle-right</li>
          <li><i class="icon-angle-up"></i> icon-angle-up</li>
          <li><i class="icon-angle-down"></i> icon-angle-down</li>
          <li><i class="icon-double-angle-left"></i> icon-double-angle-left</li>
          <li><i class="icon-double-angle-right"></i> icon-double-angle-right</li>
          <li><i class="icon-double-angle-up"></i> icon-double-angle-up</li>
          <li><i class="icon-double-angle-down"></i> icon-double-angle-down</li>
          <li><i class="icon-circle-blank"></i> icon-circle-blank</li>
          <li><i class="icon-circle"></i> icon-circle</li>
        </ul>
      </div>
      <div class="col-md-3">
        <ul class="the-icons">
          <li><i class="icon-desktop"></i> icon-desktop</li>
          <li><i class="icon-laptop"></i> icon-laptop</li>
          <li><i class="icon-tablet"></i> icon-tablet</li>
          <li><i class="icon-mobile-phone"></i> icon-mobile-phone</li>
          <li><i class="icon-quote-left"></i> icon-quote-left</li>
          <li><i class="icon-quote-right"></i> icon-quote-right</li>
          <li><i class="icon-reply"></i> icon-reply</li>
          <li><i class="icon-github-alt"></i> icon-github-alt</li>
          <li><i class="icon-folder-close-alt"></i> icon-folder-close-alt</li>
          <li><i class="icon-folder-open-alt"></i> icon-folder-open-alt</li>
        </ul>
      </div>
    </div>
  </div>
</div>

<div class="box">
  <div class="box-header">
    <span class="title">Web Application Icons</span>
  </div>
  <div class="box-content padded">
    <div class="row">
      <div class="col-md-3">
        <ul class="the-icons">
          <li><i class="icon-adjust"></i> icon-adjust</li>
          <li><i class="icon-asterisk"></i> icon-asterisk</li>
          <li><i class="icon-ban-circle"></i> icon-ban-circle</li>
          <li><i class="icon-bar-chart"></i> icon-bar-chart</li>
          <li><i class="icon-barcode"></i> icon-barcode</li>
          <li><i class="icon-beaker"></i> icon-beaker</li>
          <li><i class="icon-beer"></i> icon-beer</li>
          <li><i class="icon-bell"></i> icon-bell</li>
          <li><i class="icon-bell-alt"></i> icon-bell-alt</li>
          <li><i class="icon-bolt"></i> icon-bolt</li>
          <li><i class="icon-book"></i> icon-book</li>
          <li><i class="icon-bookmark"></i> icon-bookmark</li>
          <li><i class="icon-bookmark-empty"></i> icon-bookmark-empty</li>
          <li><i class="icon-briefcase"></i> icon-briefcase</li>
          <li><i class="icon-bullhorn"></i> icon-bullhorn</li>
          <li><i class="icon-calendar"></i> icon-calendar</li>
          <li><i class="icon-camera"></i> icon-camera</li>
          <li><i class="icon-camera-retro"></i> icon-camera-retro</li>
          <li><i class="icon-certificate"></i> icon-certificate</li>
          <li><i class="icon-check"></i> icon-check</li>
          <li><i class="icon-check-empty"></i> icon-check-empty</li>
          <li><i class="icon-circle"></i> icon-circle</li>
          <li><i class="icon-circle-blank"></i> icon-circle-blank</li>
          <li><i class="icon-cloud"></i> icon-cloud</li>
          <li><i class="icon-cloud-download"></i> icon-cloud-download</li>
          <li><i class="icon-cloud-upload"></i> icon-cloud-upload</li>
          <li><i class="icon-coffee"></i> icon-coffee</li>
          <li><i class="icon-cog"></i> icon-cog</li>
          <li><i class="icon-cogs"></i> icon-cogs</li>
          <li><i class="icon-comment"></i> icon-comment</li>
          <li><i class="icon-comment-alt"></i> icon-comment-alt</li>
          <li><i class="icon-comments"></i> icon-comments</li>
          <li><i class="icon-comments-alt"></i> icon-comments-alt</li>
          <li><i class="icon-credit-card"></i> icon-credit-card</li>
          <li><i class="icon-dashboard"></i> icon-dashboard</li>
          <li><i class="icon-desktop"></i> icon-desktop</li>
          <li><i class="icon-download"></i> icon-download</li>
          <li><i class="icon-download-alt"></i> icon-download-alt</li>
        </ul>
      </div>
      <div class="col-md-3">
        <ul class="the-icons">
          <li><i class="icon-edit"></i> icon-edit</li>
          <li><i class="icon-envelope"></i> icon-envelope</li>
          <li><i class="icon-envelope-alt"></i> icon-envelope-alt</li>
          <li><i class="icon-exchange"></i> icon-exchange</li>
          <li><i class="icon-exclamation-sign"></i> icon-exclamation-sign</li>
          <li><i class="icon-external-link"></i> icon-external-link</li>
          <li><i class="icon-eye-close"></i> icon-eye-close</li>
          <li><i class="icon-eye-open"></i> icon-eye-open</li>
          <li><i class="icon-facetime-video"></i> icon-facetime-video</li>
          <li><i class="icon-fighter-jet"></i> icon-fighter-jet</li>
          <li><i class="icon-film"></i> icon-film</li>
          <li><i class="icon-filter"></i> icon-filter</li>
          <li><i class="icon-fire"></i> icon-fire</li>
          <li><i class="icon-flag"></i> icon-flag</li>
          <li><i class="icon-folder-close"></i> icon-folder-close</li>
          <li><i class="icon-folder-open"></i> icon-folder-open</li>
          <li><i class="icon-folder-close-alt"></i> icon-folder-close-alt</li>
          <li><i class="icon-folder-open-alt"></i> icon-folder-open-alt</li>
          <li><i class="icon-food"></i> icon-food</li>
          <li><i class="icon-gift"></i> icon-gift</li>
          <li><i class="icon-glass"></i> icon-glass</li>
          <li><i class="icon-globe"></i> icon-globe</li>
          <li><i class="icon-group"></i> icon-group</li>
          <li><i class="icon-hdd"></i> icon-hdd</li>
          <li><i class="icon-headphones"></i> icon-headphones</li>
          <li><i class="icon-heart"></i> icon-heart</li>
          <li><i class="icon-heart-empty"></i> icon-heart-empty</li>
          <li><i class="icon-home"></i> icon-home</li>
          <li><i class="icon-inbox"></i> icon-inbox</li>
          <li><i class="icon-info-sign"></i> icon-info-sign</li>
          <li><i class="icon-key"></i> icon-key</li>
          <li><i class="icon-leaf"></i> icon-leaf</li>
          <li><i class="icon-laptop"></i> icon-laptop</li>
          <li><i class="icon-legal"></i> icon-legal</li>
          <li><i class="icon-lemon"></i> icon-lemon</li>
          <li><i class="icon-lightbulb"></i> icon-lightbulb</li>
          <li><i class="icon-lock"></i> icon-lock</li>
          <li><i class="icon-unlock"></i> icon-unlock</li>
        </ul>
      </div>
      <div class="col-md-3">
        <ul class="the-icons">
          <li><i class="icon-magic"></i> icon-magic</li>
          <li><i class="icon-magnet"></i> icon-magnet</li>
          <li><i class="icon-map-marker"></i> icon-map-marker</li>
          <li><i class="icon-minus"></i> icon-minus</li>
          <li><i class="icon-minus-sign"></i> icon-minus-sign</li>
          <li><i class="icon-mobile-phone"></i> icon-mobile-phone</li>
          <li><i class="icon-money"></i> icon-money</li>
          <li><i class="icon-move"></i> icon-move</li>
          <li><i class="icon-music"></i> icon-music</li>
          <li><i class="icon-off"></i> icon-off</li>
          <li><i class="icon-ok"></i> icon-ok</li>
          <li><i class="icon-ok-circle"></i> icon-ok-circle</li>
          <li><i class="icon-ok-sign"></i> icon-ok-sign</li>
          <li><i class="icon-pencil"></i> icon-pencil</li>
          <li><i class="icon-picture"></i> icon-picture</li>
          <li><i class="icon-plane"></i> icon-plane</li>
          <li><i class="icon-plus"></i> icon-plus</li>
          <li><i class="icon-plus-sign"></i> icon-plus-sign</li>
          <li><i class="icon-print"></i> icon-print</li>
          <li><i class="icon-pushpin"></i> icon-pushpin</li>
          <li><i class="icon-qrcode"></i> icon-qrcode</li>
          <li><i class="icon-question-sign"></i> icon-question-sign</li>
          <li><i class="icon-quote-left"></i> icon-quote-left</li>
          <li><i class="icon-quote-right"></i> icon-quote-right</li>
          <li><i class="icon-random"></i> icon-random</li>
          <li><i class="icon-refresh"></i> icon-refresh</li>
          <li><i class="icon-remove"></i> icon-remove</li>
          <li><i class="icon-remove-circle"></i> icon-remove-circle</li>
          <li><i class="icon-remove-sign"></i> icon-remove-sign</li>
          <li><i class="icon-reorder"></i> icon-reorder</li>
          <li><i class="icon-reply"></i> icon-reply</li>
          <li><i class="icon-resize-horizontal"></i> icon-resize-horizontal</li>
          <li><i class="icon-resize-vertical"></i> icon-resize-vertical</li>
          <li><i class="icon-retweet"></i> icon-retweet</li>
          <li><i class="icon-road"></i> icon-road</li>
          <li><i class="icon-rss"></i> icon-rss</li>
          <li><i class="icon-screenshot"></i> icon-screenshot</li>
          <li><i class="icon-search"></i> icon-search</li>
        </ul>
      </div>
      <div class="col-md-3">
        <ul class="the-icons">
          <li><i class="icon-share"></i> icon-share</li>
          <li><i class="icon-share-alt"></i> icon-share-alt</li>
          <li><i class="icon-shopping-cart"></i> icon-shopping-cart</li>
          <li><i class="icon-signal"></i> icon-signal</li>
          <li><i class="icon-signin"></i> icon-signin</li>
          <li><i class="icon-signout"></i> icon-signout</li>
          <li><i class="icon-sitemap"></i> icon-sitemap</li>
          <li><i class="icon-sort"></i> icon-sort</li>
          <li><i class="icon-sort-down"></i> icon-sort-down</li>
          <li><i class="icon-sort-up"></i> icon-sort-up</li>
          <li><i class="icon-spinner"></i> icon-spinner</li>
          <li><i class="icon-star"></i> icon-star</li>
          <li><i class="icon-star-empty"></i> icon-star-empty</li>
          <li><i class="icon-star-half"></i> icon-star-half</li>
          <li><i class="icon-tablet"></i> icon-tablet</li>
          <li><i class="icon-tag"></i> icon-tag</li>
          <li><i class="icon-tags"></i> icon-tags</li>
          <li><i class="icon-tasks"></i> icon-tasks</li>
          <li><i class="icon-thumbs-down"></i> icon-thumbs-down</li>
          <li><i class="icon-thumbs-up"></i> icon-thumbs-up</li>
          <li><i class="icon-time"></i> icon-time</li>
          <li><i class="icon-tint"></i> icon-tint</li>
          <li><i class="icon-trash"></i> icon-trash</li>
          <li><i class="icon-trophy"></i> icon-trophy</li>
          <li><i class="icon-truck"></i> icon-truck</li>
          <li><i class="icon-umbrella"></i> icon-umbrella</li>
          <li><i class="icon-upload"></i> icon-upload</li>
          <li><i class="icon-upload-alt"></i> icon-upload-alt</li>
          <li><i class="icon-user"></i> icon-user</li>
          <li><i class="icon-user-md"></i> icon-user-md</li>
          <li><i class="icon-volume-off"></i> icon-volume-off</li>
          <li><i class="icon-volume-down"></i> icon-volume-down</li>
          <li><i class="icon-volume-up"></i> icon-volume-up</li>
          <li><i class="icon-warning-sign"></i> icon-warning-sign</li>
          <li><i class="icon-wrench"></i> icon-wrench</li>
          <li><i class="icon-zoom-in"></i> icon-zoom-in</li>
          <li><i class="icon-zoom-out"></i> icon-zoom-out</li>
        </ul>
      </div>
    </div>
  </div>
</div>

<div class="box">
  <div class="box-header">
    <span class="title">Text Editor Icons</span>
  </div>
  <div class="box-content padded">
    <div class="row">
      <div class="col-md-3">
        <ul class="the-icons">
          <li><i class="icon-file"></i> icon-file</li>
          <li><i class="icon-file-alt"></i> icon-file-alt</li>
          <li><i class="icon-cut"></i> icon-cut</li>
          <li><i class="icon-copy"></i> icon-copy</li>
          <li><i class="icon-paste"></i> icon-paste</li>
          <li><i class="icon-save"></i> icon-save</li>
          <li><i class="icon-undo"></i> icon-undo</li>
          <li><i class="icon-repeat"></i> icon-repeat</li>
        </ul>
      </div>
      <div class="col-md-3">
        <ul class="the-icons">
          <li><i class="icon-text-height"></i> icon-text-height</li>
          <li><i class="icon-text-width"></i> icon-text-width</li>
          <li><i class="icon-align-left"></i> icon-align-left</li>
          <li><i class="icon-align-center"></i> icon-align-center</li>
          <li><i class="icon-align-right"></i> icon-align-right</li>
          <li><i class="icon-align-justify"></i> icon-align-justify</li>
          <li><i class="icon-indent-left"></i> icon-indent-left</li>
          <li><i class="icon-indent-right"></i> icon-indent-right</li>
        </ul>
      </div>
      <div class="col-md-3">
        <ul class="the-icons">
          <li><i class="icon-font"></i> icon-font</li>
          <li><i class="icon-bold"></i> icon-bold</li>
          <li><i class="icon-italic"></i> icon-italic</li>
          <li><i class="icon-strikethrough"></i> icon-strikethrough</li>
          <li><i class="icon-underline"></i> icon-underline</li>
          <li><i class="icon-link"></i> icon-link</li>
          <li><i class="icon-paper-clip"></i> icon-paper-clip</li>
          <li><i class="icon-columns"></i> icon-columns</li>
        </ul>
      </div>
      <div class="col-md-3">
        <ul class="the-icons">
          <li><i class="icon-table"></i> icon-table</li>
          <li><i class="icon-th-large"></i> icon-th-large</li>
          <li><i class="icon-th"></i> icon-th</li>
          <li><i class="icon-th-list"></i> icon-th-list</li>
          <li><i class="icon-list"></i> icon-list</li>
          <li><i class="icon-list-ol"></i> icon-list-ol</li>
          <li><i class="icon-list-ul"></i> icon-list-ul</li>
          <li><i class="icon-list-alt"></i> icon-list-alt</li>
        </ul>
      </div>
    </div>
  </div>
</div>

<div class="box">
  <div class="box-header">
    <span class="title">Directional Icons</span>
  </div>
  <div class="box-content padded">
    <div class="row">
      <div class="col-md-3">
        <ul class="the-icons">
          <li><i class="icon-angle-left"></i> icon-angle-left</li>
          <li><i class="icon-angle-right"></i> icon-angle-right</li>
          <li><i class="icon-angle-up"></i> icon-angle-up</li>
          <li><i class="icon-angle-down"></i> icon-angle-down</li>
          <li><i class="icon-arrow-down"></i> icon-arrow-down</li>
          <li><i class="icon-arrow-left"></i> icon-arrow-left</li>
          <li><i class="icon-arrow-right"></i> icon-arrow-right</li>
          <li><i class="icon-arrow-up"></i> icon-arrow-up</li>
        </ul>
      </div>
      <div class="col-md-3">
        <ul class="the-icons">
          <li><i class="icon-caret-down"></i> icon-caret-down</li>
          <li><i class="icon-caret-left"></i> icon-caret-left</li>
          <li><i class="icon-caret-right"></i> icon-caret-right</li>
          <li><i class="icon-caret-up"></i> icon-caret-up</li>
          <li><i class="icon-chevron-down"></i> icon-chevron-down</li>
          <li><i class="icon-chevron-left"></i> icon-chevron-left</li>
          <li><i class="icon-chevron-right"></i> icon-chevron-right</li>
          <li><i class="icon-chevron-up"></i> icon-chevron-up</li>
        </ul>
      </div>
      <div class="col-md-3">
        <ul class="the-icons">
          <li><i class="icon-circle-arrow-down"></i> icon-circle-arrow-down</li>
          <li><i class="icon-circle-arrow-left"></i> icon-circle-arrow-left</li>
          <li><i class="icon-circle-arrow-right"></i> icon-circle-arrow-right</li>
          <li><i class="icon-circle-arrow-up"></i> icon-circle-arrow-up</li>
          <li><i class="icon-double-angle-left"></i> icon-double-angle-left</li>
          <li><i class="icon-double-angle-right"></i> icon-double-angle-right</li>
          <li><i class="icon-double-angle-up"></i> icon-double-angle-up</li>
          <li><i class="icon-double-angle-down"></i> icon-double-angle-down</li>
        </ul>
      </div>
      <div class="col-md-3">
        <ul class="the-icons">
          <li><i class="icon-hand-down"></i> icon-hand-down</li>
          <li><i class="icon-hand-left"></i> icon-hand-left</li>
          <li><i class="icon-hand-right"></i> icon-hand-right</li>
          <li><i class="icon-hand-up"></i> icon-hand-up</li>
          <li><i class="icon-circle"></i> icon-circle</li>
          <li><i class="icon-circle-blank"></i> icon-circle-blank</li>
        </ul>
      </div>
    </div>
  </div>
</div>

<div class="box">
  <div class="box-header">
    <span class="title">Video Player Icons</span>
  </div>
  <div class="box-content padded">
    <div class="row">
      <div class="col-md-3">
        <ul class="the-icons">
          <li><i class="icon-play-circle"></i> icon-play-circle</li>
          <li><i class="icon-play"></i> icon-play</li>
          <li><i class="icon-pause"></i> icon-pause</li>
          <li><i class="icon-stop"></i> icon-stop</li>
        </ul>
      </div>
      <div class="col-md-3">
        <ul class="the-icons">
          <li><i class="icon-step-backward"></i> icon-step-backward</li>
          <li><i class="icon-fast-backward"></i> icon-fast-backward</li>
          <li><i class="icon-backward"></i> icon-backward</li>
          <li><i class="icon-forward"></i> icon-forward</li>
        </ul>
      </div>
      <div class="col-md-3">
        <ul class="the-icons">
          <li><i class="icon-fast-forward"></i> icon-fast-forward</li>
          <li><i class="icon-step-forward"></i> icon-step-forward</li>
          <li><i class="icon-eject"></i> icon-eject</li>
        </ul>
      </div>
      <div class="col-md-3">
        <ul class="the-icons">
          <li><i class="icon-fullscreen"></i> icon-fullscreen</li>
          <li><i class="icon-resize-full"></i> icon-resize-full</li>
          <li><i class="icon-resize-small"></i> icon-resize-small</li>
        </ul>
      </div>
    </div>
  </div>
</div>

<div class="box">
  <div class="box-header">
    <span class="title">Social Icons</span>
  </div>
  <div class="box-content padded">
    <div class="row">
      <div class="col-md-3">
        <ul class="the-icons">
          <li><i class="icon-phone"></i> icon-phone</li>
          <li><i class="icon-phone-sign"></i> icon-phone-sign</li>
          <li><i class="icon-facebook"></i> icon-facebook</li>
          <li><i class="icon-facebook-sign"></i> icon-facebook-sign</li>
        </ul>
      </div>
      <div class="col-md-3">
        <ul class="the-icons">
          <li><i class="icon-twitter"></i> icon-twitter</li>
          <li><i class="icon-twitter-sign"></i> icon-twitter-sign</li>
          <li><i class="icon-github"></i> icon-github</li>
          <li><i class="icon-github-alt"></i> icon-github-alt</li>
        </ul>
      </div>
      <div class="col-md-3">
        <ul class="the-icons">
          <li><i class="icon-github-sign"></i> icon-github-sign</li>
          <li><i class="icon-linkedin"></i> icon-linkedin</li>
          <li><i class="icon-linkedin-sign"></i> icon-linkedin-sign</li>
          <li><i class="icon-pinterest"></i> icon-pinterest</li>
        </ul>
      </div>
      <div class="col-md-3">
        <ul class="the-icons">
          <li><i class="icon-pinterest-sign"></i> icon-pinterest-sign</li>
          <li><i class="icon-google-plus"></i> icon-google-plus</li>
          <li><i class="icon-google-plus-sign"></i> icon-google-plus-sign</li>
          <li><i class="icon-sign-blank"></i> icon-sign-blank</li>
        </ul>
      </div>
    </div>
  </div>
</div>

<div class="box">
  <div class="box-header">
    <span class="title">Medical Icons</span>
  </div>
  <div class="box-content padded">
    <div class="row">
      <div class="col-md-3">
        <ul class="the-icons">
          <li><i class="icon-ambulance"></i> icon-ambulance</li>
          <li><i class="icon-beaker"></i> icon-beaker</li>
        </ul>
      </div>
      <div class="col-md-3">
        <ul class="the-icons">
          <li><i class="icon-h-sign"></i> icon-h-sign</li>
          <li><i class="icon-hospital"></i> icon-hospital</li>
        </ul>
      </div>
      <div class="col-md-3">
        <ul class="the-icons">
          <li><i class="icon-medkit"></i> icon-medkit</li>
          <li><i class="icon-plus-sign-alt"></i> icon-plus-sign-alt</li>
        </ul>
      </div>
      <div class="col-md-3">
        <ul class="the-icons">
          <li><i class="icon-stethoscope"></i> icon-stethoscope</li>
          <li><i class="icon-user-md"></i> icon-user-md</li>
        </ul>
      </div>
    </div>
  </div>
</div>

  </div>
</div>

</body>
</html>
